<div class="effeckt effeckt-captions group">

  <header>
    <h2>
      Captions
      <a href="captions.html">#</a>
    </h2>
  </header>

  <div class="all-captions-wrap">

  <!-- Appear -->
  <figure class="effeckt-caption" data-effeckt-type="quarter-appear">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Appear</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Quarter Slide Up -->
  <figure class="effeckt-caption" data-effeckt-type="quarter-slide-up">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Quarter Slide Up</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Quarter Slide Side -->
  <figure class="effeckt-caption" data-effeckt-type="quarter-slide-side">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Quarter Slide Side</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Quarter Fall in -->
  <figure class="effeckt-caption" data-effeckt-type="quarter-fall-in">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Quarter Fall in</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- 3Quarter Two Step -->
  <figure class="effeckt-caption" data-effeckt-type="quarter-two-step">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Quarter Two-step</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Quarter Caption Zoom -->
  <figure class="effeckt-caption" data-effeckt-type="quarter-zoom">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Quarter Caption Zoom</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Cover Fade -->
  <figure class="effeckt-caption" data-effeckt-type="cover-fade">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Cover Fade</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Cover Push Right -->
  <figure class="effeckt-caption" data-effeckt-type="cover-push-right">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Cover Push Right</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Revolving Door Left -->
  <figure class="effeckt-caption" data-effeckt-type="revolving-door-left">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Revolving Door</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Revolving Door Right -->
  <figure class="effeckt-caption" data-effeckt-type="revolving-door-right">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Revolving Door Inverse</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Revolving Door Top -->
  <figure class="effeckt-caption" data-effeckt-type="revolving-door-top">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Revolving Door</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Revolving Door Bottom -->
  <figure class="effeckt-caption" data-effeckt-type="revolving-door-bottom">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Revolving Door Inverse</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Cover Slide Top -->
  <figure class="effeckt-caption" data-effeckt-type="cover-slide-top">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Cover Slide Top</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Caption Offset -->
  <figure class="effeckt-caption" data-effeckt-type="offset">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Caption Offset</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Guillotine Reverse -->
  <figure class="effeckt-caption" data-effeckt-type="guillotine-reverse">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Guillotine Reverse</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Half Slide -->
  <figure class="effeckt-caption" data-effeckt-type="half-slide">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Half Slide</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Sqkwoosh -->
  <figure class="effeckt-caption" data-effeckt-type="sqkwoosh">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Sqkwoosh</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>

  <!-- Tunnel -->
  <figure class="effeckt-caption" data-effeckt-type="tunnel">
    <img src="http://placehold.it/300x200" alt="">
    <figcaption>
      <div class="effeckt-figcaption-wrap">
        <h3>Tunnel</h3>
        <p>Lorem ipsum dolar.</p>
      </div>
    </figcaption>
  </figure>
  
  </div>

</div>
